<template>
  <div class="swipers">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(banner, index) in bannerList" :key="index">
        <img :src="banner" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      bannerList: [
        'http://www.pptbz.com/pptpic/UploadFiles_6909/201306/2013062320262198.jpg',
        'http://5b0988e595225.cdn.sohucs.com/images/20171013/fec49f59b98041a4a16886893447f746.jpeg',
        'http://pic26.photophoto.cn/20130225/0011024004066828_b.jpg',
      ],
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 分页的小点可以点击
        },
        loop: true, // 环路翻滚
        autoplay: {
          delay: 3000, // 延时
          stopOnLastSlide: false, // 最后一个slide时是否继续轮播
          disableOnInteraction: false, // 点击小点是否终止自动轮播
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  }
}
</script>

<style scoped>
.swipers {
  width: 100%;
}
.swipers .swiper-wrapper img {
  width: 100%;
  height: 80px;
}
</style>